<template>
  <view class="content">
    <image class="logo" src="/static/logo.png" />
    <view class="text-area">
      <text class="title">{{ title }}</text>
    </view>
    <view class="ech">
      <base-chart :options="options" />
    </view>
     
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import baseChart from "@/echarts/BaseCharts.vue";
const options = ref({
  grid: {
    left: "4%",
    right: "6%",
    bottom: "3%",
    top: "8%",
    containLabel: true,
  },
  tooltip: {
    trigger: "axis",
    confine: true,
    textStyle: {
      textShadowColor: "#fff",
      textShadowBlur: 1,
    },
  },
  xAxis: {
    boundaryGap: false,
    type: "category",
    axisLabel: {
      color: "#999999",
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    data:
      // xData.value
      [
        "00:00",
        "01:00",
        "02:00",
        "03:00",
        "04:00",
        "05:00",
        "06:00",
        "07:00",
        "08:00",
        "09:00",
        "10:00",
        "11:00",
        "12:00",
        "13:00",
        "14:00",
        "15:00",
        "16:00",
        "17:00",
        "18:00",
        "19:00",
        "20:00",
        "21:00",
        "22:00",
        "23:00",
      ],
  },
  yAxis: {
    type: "value",
    axisLabel: {
      color: "#999999",
    },
  },
  series: [
    {
      smooth: true,
      symbolSize: 0,
      lineStyle: {
        normal: {
          color: "#8dadfa", // 线条颜色
        },
      },
      data: [
        150, 224, 218, 135, 147, 113, 211, 22, 33, 11, 44, 55, 66, 77, 88, 99,
        100, 224, 218, 135, 147, 113, 211, 22,
      ],
      type: "line",
    },
  ],
  // dataZoom: [
  //   {
  //     type: "slider", // 滑动条
  //     xAxisIndex: 0, // 控制第一个xAxis
  //     start: 0,      // 初始范围起始比例（0%）
  //     end: 50,       // 初始范围结束比例（50%）
  //     bottom: "10%",  // 滑动条距离容器底部的距离（需与grid.bottom协调）
  //     height: 12,    // 滑动条高度（像素）
  //   },
  // ],q
});
const title = ref('Hello')
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
.ech{
    height: 300rpx;
  width: 100%;
  margin-top: 200rpx;
}
</style>
